<template>
  <div class="basemap">
    <div class="btn-box">
      <button @click="startMoving">开始</button>
      <button @click="stopMoving">停止</button>
    </div>
    <div id="map" class="map"></div>
  </div>
</template>

<script>
// import L from 'leaflet'

export default {
  data() {
    return {
      map: null,
      linedata: [
        [29.605, 106.695],
        [29.563, 106.5808],
        [29.5428, 106.5923],
        [29.5679, 106.4193],
        [29.623, 106.4193],
        [29.66, 106.6054],
      ],
      animatedMarker: null,
    };
  },
  mounted() {
    this.initMap();
    let layers = this.drawLine(this.linedata);
    this.map.addLayer(layers);
  },
  methods: {
    initMap() {
      // 重庆市经纬度 107.820952,29.839539
      // const cqp = this.$L.latLng(29.5647398, 106.5478767);\
      const cqp = this.$L.latLng(29.602163, 106.534291);

      this.map = this.$L
        .map("map", {
          // 版权控件
          attributionControl: false,
          // 缩放控件
          zoomControl: false,
        })
        .setView(cqp, 12);

      // 天地图token
      const tdtToken = "810e2cf8deac0489c6bb8ee29e5d9591";
      // 天地图 影像底图
      const wmtsImg =
        "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
        tdtToken;

      this.$L
        .tileLayer(wmtsImg, {
          maxZoom: 18,
        })
        .addTo(this.map);
    },
    startMoving() {
      this.animatedMarker.start();
    },
    stopMoving() {
      console.log(this.animatedMarker);
      this.animatedMarker.pause();
    },
    drawLine(data, pic) {
      let lineLayers = this.$L.layerGroup();
      // 轨迹
      let line = this.$L.polyline(data, {
        color: "#00ff00",
        weight: 10,
      });
      // 标签移动轨迹
      let routeLine = this.$L.polyline([], {
        color: "#ff9900",
        weight: 10,
      });

      // 轨迹方向 箭头
      let lineArrow = this.$L.polylineDecorator(line, {
        patterns: [
          {
            repeat: 30,
            symbol: this.$L.Symbol.arrowHead({
              pixelSize: 10,
              headAngle: 75,
              polygon: false,
              pathOptions: {
                stroke: true,
                weight: 3,
                color: "#fff",
              },
            }),
          },
        ],
      });

      lineLayers.addLayer(line);
      lineLayers.addLayer(routeLine);
      lineLayers.addLayer(lineArrow);

      // 图标
      let iconPic = this.$L.icon({
        iconSize: [30, 30],
        iconAnchor: [15, 30],
        iconUrl: require("leaflet/dist/images/marker-icon.png"),
        shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
      });

      let newLatlngs = [line.getLatLngs()[0]];

      // 图标移动
      this.animatedMarker = this.$L.animatedMarker(line.getLatLngs(), {
        icon: iconPic,
        playCall: (latlng) => {
          newLatlngs.push(latlng);
          routeLine.setLatLngs(newLatlngs);
        },
      });

      lineLayers.addLayer(this.animatedMarker);

      return lineLayers;
    },
    animate: function () {
      var now = Date.now();
      var end = this.startedAt + this.duration;
      if (now < end) {
        if (this.isPlay) {
          requestAnimationFrame(this.animate.bind(this));
        }
      } else if (this.i < this.latlngs.length - 1) {
        this.startedAt = Date.now();
        this.startlatlng = this._latlngs[this.i];
        this.nextLatlng = this.latlngs[this.i + 1];
        this.duration = this.startLatLng.duration;
        this.setLatlng(this.latlngs[this.i]);
        this.i++;
        if (this.isplay) {
          requestAnimationFrame(this.animate.bind(this));
        }
      }
      //·解决地图缩放是图标会偏移轨迹线问题
      if (!this.iszooming && this.map) {
        var t = now - this.startedAt;
        var lat =
          this.startlatlng.lat +
          ((this.nextlatlng.lat - this.startlatlng.lat) /
            this.startlatlng.duration) *
            t;
        var lng =
          this.startLatlng.Ing +
          ((this.nextLatlng.Ing - this.startLatlng.Ing) /
            this.startlatlng.duration) *
            t;
        this.setlatlng({
          lat: lat,
          lng: lng,
        });
        //用于动态轨迹线展示
        if (this.options.playcall) {
          this.options.playCall({
            lat: lat,
            lng: lng,
          });
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>

.btn-box{ 
  position: absolute;
  top: 10%;
  left: 50%;
  z-index: 999;
}
</style>